<template>
  <!--<div class="dashboard-container">-->
    <!--<el-row>-->
      <!--<el-col :span="6">-->
        <!--&lt;!&ndash;用户总数&ndash;&gt;-->
        <!--<el-card shadow="hover" class="mini-count-card">-->
          <!--<div class="card-icon bg-primary">-->
            <!--<i class="fas fa-users"></i>-->
          <!--</div>-->
          <!--<div class="card-content">-->
            <!--<p class="title">警力总数</p>-->
            <!--<p class="total">{{totalPolice | NumFormat}}</p>-->
          <!--</div>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="6">-->
        <!--&lt;!&ndash;报备总人数&ndash;&gt;-->
        <!--<el-card shadow="hover" class="mini-count-card">-->
          <!--<div class="card-icon bg-success">-->
            <!--<i class="fas fa-user-clock"></i>-->
          <!--</div>-->
          <!--<div class="card-content">-->
            <!--<p class="title">今日报备警力</p>-->
            <!--<p class="total">{{todayPrep | NumFormat}}</p>-->
          <!--</div>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="6">-->
        <!--&lt;!&ndash;新警情&ndash;&gt;-->
        <!--<el-card shadow="hover" class="mini-count-card">-->
          <!--<div class="card-icon bg-danger">-->
            <!--<i class="fas fa-exclamation-triangle"></i>-->
          <!--</div>-->
          <!--<div class="card-content">-->
            <!--<p class="title">新警情</p>-->
            <!--<p class="total">{{totalNewCase | NumFormat}}</p>-->
          <!--</div>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="6">-->
        <!--&lt;!&ndash;处理中警情&ndash;&gt;-->
        <!--<el-card shadow="hover" class="mini-count-card">-->
          <!--<div class="card-icon bg-warning">-->
            <!--<i class="fas fa-tasks"></i>-->
          <!--</div>-->
          <!--<div class="card-content">-->
            <!--<p class="title">处理中警情</p>-->
            <!--<p class="total">{{totalDoingCase | NumFormat}}</p>-->
          <!--</div>-->
        <!--</el-card>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <!--<el-row>-->
      <!--<el-col :span="8" style="height: 300px;">-->
        <!--<el-card shadow="hover">-->
          <!--<jlfb-chart cid="prepAllPie" ref="prepAllPie" :showTitle="true"></jlfb-chart>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="8" style="height: 300px;">-->
        <!--<el-card shadow="hover">-->
          <!--<jlfb-chart cid="prepMjPie" ref="prepMjPie" policeType="9" :showTitle="true"></jlfb-chart>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="8" style="height: 300px;">-->
        <!--<el-card shadow="hover">-->
          <!--<jlfb-chart cid="prepFjPie" ref="prepFjPie" policeType="10" :showTitle="true"></jlfb-chart>-->
        <!--</el-card>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <!--<el-row>-->
      <!--<el-col :span="24" style="height: 300px;">-->
        <!--<el-card shadow="hover">-->
          <!--<prep-count-line cid="prepCountLine" ref="prepCountLine"></prep-count-line>-->
        <!--</el-card>-->
      <!--</el-col>-->
    <!--</el-row>-->
  <!--</div>-->
</template>
<script>
  import JlfbChart from '../modules/statistics/common/PoliceDistributionPie'
  import PrepCountLine from '../modules/statistics/common/PrepCountLine'

  export default {
    name: 'dashboard',
    components: {
      JlfbChart,PrepCountLine
    },
    data() {
      return {
        totalPolice: 0, // 总警力
        todayPrep: 0, // 今日报备警力
        totalNewCase: 0, // 新警情数量
        totalDoingCase: 0, // 处理中警情数量
        countParams: {
          startTime: this.$moment().format('YYYY-MM-DD 00:00:00'),
          endTime: this.$moment().format('YYYY-MM-DD 23:59:59')
        }
      }
    },
    mounted: function(){
      // this.countPolice();
      // this.countTodayPrep();
      // this.countTotalNewCase();
      // this.countTotalDoingCase();
      //
      // this.$refs.prepAllPie.query();
      // this.$refs.prepMjPie.query();
      // this.$refs.prepFjPie.query();
      // this.$refs.prepCountLine.query();
    },
    methods: {
      countPolice() {
        this.api.post('/user/count', {})
          .then((data) => {
            if(data.code==200){
              this.totalPolice = data.data.TOTAL;
            }else{
              this.$message.error(data.message);
            }
          });
      },
      countTodayPrep() {
        this.api.post('/preparation/countPrepPolice', this.countParams)
          .then((data) => {
            if(data.code==200){
              this.todayPrep = data.data.TOTAL;
            }else{
              this.$message.error(data.message);
            }
          });
      },
      countTotalNewCase() {
        this.api.post('/case/count', {})
          .then((data) => {
            if(data.code==200){
              this.totalNewCase = data.data.TOTAL;
            }else{
              this.$message.error(data.message);
            }
          });
      },
      countTotalDoingCase() {
        this.api.post('/case/count', {state: 'doing'})
          .then((data) => {
            if(data.code==200){
              this.totalDoingCase = data.data.TOTAL;
            }else{
              this.$message.error(data.message);
            }
          });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-row{
    margin-bottom: 10px;
  }
  .el-card{
    height: 100%;
    margin: 0 10px;
  }
  .el-card__body{
    height: 100%;
    padding: 0;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .mini-count-card {
    .card-icon {
      float: left;
      text-align: center;
      line-height: 75px;
      width: 60px;
      color: white;
      background-color: #67C23A;
      font-size: 20px;
    }
    .card-content {
      display: inline-block;
      padding: 10px;
      height: 75px;

      .title {
        color: #bbbbbb;
        font-size: 13px;
      }
      .total {
        font-size: 25px;
        font-weight: bold;
      }
    }
  }
</style>
